<!DOCTYPE html>
<html>
<head>
  <title>Keyframes in Etro</title>
  <script src="../../dist/etro-iife.js"></script>
</head>
<body>
  <script>
    let movie
    window.addEventListener('load', () => {
      const canvas = document.createElement('canvas')
      document.body.appendChild(canvas)

      initMovie(canvas)
    })

    const initMovie = canvas => {
      movie = new etro.Movie({ canvas })

      canvas.width = canvas.height = 400
      movie
      // create a red 400x400 rectangle that starts at time 0 and lasts 2 seconds
      // Keyframes let you make a dynamic property that interpolates.
      // For instance, you can set a layer's opacity to decrease over time, effectively making it fade out
      // Numbers and objects interpolate (animate smoothly)
        .addLayer(new etro.layer.Visual({
          startTime: 0,
          duration: 3,
          // omitting width or height sets the respective element to fill the screen
          background: 'green',
          // opacity=1 @ 0s (relative to the layer) -> opacity=0 @ 1s (relative to the layer)
          opacity: new etro.KeyFrame([0, 1], [3, 0])
        }))
      // Because strings don't interpolate, you need to convert colors and fonts to objects
      // for a smooth effect (which will then be automatically `.toString()`ed when set on the canvas
      // context).
        .addLayer(new etro.layer.Visual({
          startTime: 3,
          duration: 3,
          background: new etro.KeyFrame([0, etro.parseColor('red')], [3, new etro.Color(0, 0, 255)])
        }))
      // You can use other types in keyframes, but they will be used sequentially without interpolation
        .addLayer(new etro.layer.Text({
          startTime: 6,
          duration: 3,
          text: new etro.KeyFrame([0, 'Hello ...'], [1.5, '...world'])
        }))

      // When interpolating, you can specify how the keyframes will be interpolated
        .addLayer(new etro.layer.Visual({
          startTime: 9,
          duration: 3,
          width: new etro.KeyFrame([0, movie.width, etro.linearInterp], [3, 0]), // (obviously) linear
          height: new etro.KeyFrame([0, movie.height, etro.linearInterp], [3, 0]), // (obviously) linear
          background: 'blue'
        }))

      // Of course, you can have more than two keyframes
        .addLayer(new etro.layer.Text({
          text: 'Etro',
          startTime: 12,
          duration: 6,
          background: new etro.KeyFrame(
            [0, etro.parseColor('#0ff')],
            [2, etro.parseColor('#ff0')],
            [4, etro.parseColor('#f0f')],
            [6, etro.parseColor('#fff')]
          ),
          // let's just add another property (fonts can be parsed into objects just like colors)
          font: new etro.KeyFrame(
            [0, etro.parseFont('28px monospace'), etro.cosineInterp],
            [6, etro.parseFont('36px monospace')]
          )
        }))
        .play()
    }
  </script>
</body>
</html>
